import React, { useEffect, useState } from 'react';
import { Form, Button, Modal, Select, Input } from 'antd';
import { getUserList, getGroupList } from '../service';

const UpdateForm = ({
  onSubmit: handleUpdate,
  onCancel: handleUpdateModalVisible,
  updateModalVisible,
  type: type, //0:添加测试人员,1:编辑,2:查看
}) => {
  const [form] = Form.useForm();
  const [userList, setUserList] = useState([]);
  const [groupList, setGroupList] = useState([]);

  if (type == 0) {
    form.setFieldsValue({
      name: '',
      mail: '',
      group: '',
      phone: '',
    })
  }
  useEffect(() => {
    getGroupList().then((data) => {
      setGroupList(data.data);
    });
    getUserList().then((data) => {
      setUserList(data.data);
    });
  }, []);
  const handleConfirm = async (fieldsValue) => {
    let params = {
      ...fieldsValue,
      name: fieldsValue.name
    }
    handleUpdate(params);
  };
  const handleChange = (v) => {
    console.log(v)
    userList.forEach((item) => {
      if (item.name == v) {
        form.setFieldsValue({
          group: item.group
        });
        form.setFieldsValue({
          mail: item.mail
        })
      }
    })
  }
  const RenderContent = () => {
    return (
      <Form
        name="basic"
        labelCol={{
          span: 8,
        }}
        wrapperCol={{
          span: 16,
        }}
        form={form}
        onFinish={handleConfirm}
        autoComplete="off"
      >
        <Form.Item label="姓名" name="name" rules={[{ required: true, message: '请选择姓名!' }]}>
          <Select placeholder="" allowClear onChange={(v) => { handleChange(v) }}>
            {userList.map((item) => (
              <Select.Option value={item.id} key={item.name}>
                {item.name}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item label="邮箱" name="mail" rules={[{ required: true }]}>
          <Input disabled />
        </Form.Item>
        <Form.Item label="部门" name="group" rules={[{ required: true, message: '请输入部门!' }]}>
          <Select placeholder="" allowClear>
            {groupList.map((item) => (
              <Select.Option value={item.group} key={item.group}>
                {item.group}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item
          label="联系方式"
          name="phone"
          validateTrigger='onBlur'
          rules={[{
            required: true, message: '请输入联系方式!'
          }, {
            required: false,        //在用户输入了内容后，再进行此项验证，所以要设为false
            label: "手机号",
            pattern: new RegExp(/^1(3|4|5|6|7|8|9)\d{9}$/, "g"),
            message: '请输入正确的手机号'
          }]}
        >
          <Input maxLength={11} />
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="primary" htmlType="submit">
            创建
          </Button>
        </Form.Item>
      </Form>
    );
  };
  const EditRenderContent = () => {
    return (
      <Form
        name="basic"
        labelCol={{
          span: 8,
        }}
        wrapperCol={{
          span: 16,
        }}
        onFinish={handleConfirm}
        autoComplete="off"
        initialValues={updateModalVisible}
      >
        <Form.Item label="姓名" name="name" rules={[{ required: true, message: '请选择姓名!' }]}>
          <Select placeholder="" allowClear>
            {userList.map((item) => (
              <Select.Option value={item.name} key={item.name}>
                {item.name}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item label="邮箱" name="mail" >
          <Input />
        </Form.Item>
        <Form.Item label="部门" name="group" rules={[{ required: true, message: '请选择部门!' }]}>
          <Input disabled />
        </Form.Item>
        <Form.Item
          label="联系方式"
          name="phone"
          maxLength={11}
          validateTrigger='onBlur'
          rules={[{
            required: true, message: '请输入联系方式!'
          }, {
            required: false,        //在用户输入了内容后，再进行此项验证，所以要设为false
            label: "手机号",
            pattern: new RegExp(/^1(3|4|5|6|7|8|9)\d{9}$/, "g"),
            message: '请输入正确的手机号'
          }]}
        >
          <Input maxLength={11} />
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="primary" htmlType="submit">
            修改
          </Button>
        </Form.Item>
      </Form>
    );
  };
  const SearchRenderContent = () => {
    return (
      <Form
        name="basic"
        labelCol={{
          span: 8,
        }}
        wrapperCol={{
          span: 16,
        }}
        onFinish={handleConfirm}
        autoComplete="off"
      >
        <Form.Item label="姓名" name="name">
          {updateModalVisible.name}
        </Form.Item>
        <Form.Item label="邮箱" name="mail">
          {updateModalVisible.mail}
        </Form.Item>
        <Form.Item label="部门" name="group">
          {updateModalVisible.group}
        </Form.Item>
        <Form.Item label="联系方式" name="phone">
          {updateModalVisible.phone}
        </Form.Item>
      </Form>
    );
  };

  return (
    <Modal
      width={640}
      destroyOnClose
      title={type == 0 ? '添加测试人员信息' : type == 1 ? '编辑测试人员信息' : '查看测试人员信息'}
      visible={updateModalVisible}
      footer={null}
      onCancel={() => handleUpdateModalVisible()}
    >
      {type == 0 && <RenderContent />}
      {type == 1 && <EditRenderContent />}
      {type == 2 && <SearchRenderContent />}
    </Modal>
  );
};

export default UpdateForm;
